<template>
  <div class="page-container">
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e"
      @grid-data-change="e => $bus.$emit('sku_map_manage/thirdPartyList', e)">
    </ex_super_table_page>
    <ex_super_dialog_form ref="formDialog" v-bind="dialog" @afterSubmitSuccess="submitAfter">

    </ex_super_dialog_form>
    <ozon_agreement ref="ozon_agreement" />
  </div>
</template>
<script>
import vue from 'vue'

import ozon_agreement from './dialog/ozon_agreement'
import superTablePageFunction from '@/mixin/super-table-page-function';
export default {
  title: 'label_thirdParty_authorized',
  mixins: [superTablePageFunction],
  components: { ozon_agreement },
  data() {
    return {
      selection: [],
      apiStructure: {
        DEFAULT: {
          sellerId: {
            label: 'ClientID', i18n: false,
            rules: [{ required: true, message: vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' }],
          },
          apiKeys: {
            label: "label_secret_key",
            rules: [{ required: true, message: vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' }],
          },
        },
        OZON: {
          sellerId: {
            label: 'ClientID', i18n: false,

            rules: [{ required: true, message: vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' }],
          },
          apiKeys: {
            label: "label_secret_key",
            rules: [{ required: true, message: vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' }],
          },
          checkRule: {
            click: this.clickOzonAgreement,
            rules: [{ required: true, message: vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' }],
          },
        },
        WILDBERRIES: {
          sellerId: {
            label: "label_platform_store",
            rules: [{ required: true, message: vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' }],
          },
          apiKeys: {
            label: 'Token', i18n: false,
            rules: [{ required: true, message: vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' }],
          },
        },
        ALIBABA_PO: {
          sellerId: {
            label: "label_platform_account",
            rules: [{ required: true, message: vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' }],
          },
          apiKeys: {
            label: 'Token', i18n: false,
            rules: [{ required: true, message: vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' }],
          },
        },
        AMAZON: {
          amazonRegionType: {
            label: "区域",
            rules: [{ required: true, message: vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' }],
          },
          sellerId: {
            label: "ClientID",
            rules: [{ required: true, message: vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' }],
          },
          apiKeys: {
            label: 'Token', i18n: false,
            rules: [{ required: true, message: vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' }],
          },

        },
      },
      option: {
        action: [
          {
            label: 'label_add_authorize', attrs: { icon: "el-icon-plus" }, click: () => {
              this['$refs']['formDialog'].showNew({
                title: this.$tt('label_add_authorize'),
                data: {},
                onlySetData: true,
              })
            }
          },
        ],
        table: {
          url: "/ums-api/client/ThirdPartyAuthorizedClientRpc/selectList.json",
          model: [
            {
              key: 'platformCode', label: 'label_platform_info', 'width': 140, 'show-overflow-tooltip': true,
              formatter: (r, c, v, i) => this.$enumShow(v, "ApiPlatformEnum")
            },
            { key: 'status', label: 'label_status', 'width': 140, 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$enumShow(v, "UmsThirdPartyAuthorizedStatusEnum") },
            {
              key: 'businessType', label: 'label_business_type', 'width': 150,
              render: (h, scope) => this.$renderText(h, scope, { enum: "UmsThirdPartyAuthorizedTypeEnum" })
            },
            {
              key: 'info', label: "label_authorize_info", 'min-width': 300, attrs: { align: 'left' },
              render: (h, { row, }) => {
                const structure = this.apiStructure[row.platformCode] ? this.apiStructure[row.platformCode] : this.apiStructure.DEFAULT
                return (<div>
                  <div>{structure['sellerId'].i18n == false ? structure['sellerId'].label : this.$tt(structure['sellerId'].label)} : {row['sellerId']}</div>
                  <div>{structure['apiKeys'].i18n == false ? structure['apiKeys'].label : this.$tt(structure['apiKeys'].label)} : {row['apiKeys']}</div>
                </div>)
              }
            },
            // { key: 'sellerId', label: 'ClientID', 'min-width': 180, 'show-overflow-tooltip': true, },

            // { key: 'apiKeys', label: 'label_secret_key', 'min-width': 220, 'show-overflow-tooltip': true, },

            {
              type: 'operate', width: 210, operate: [

                {
                  label: 'label_edit', click: (row) => {

                    this['$refs']['formDialog'].showNew({
                      title: this.$tt('label_edit_authorize'),
                      params: { "id": row["id"] },

                    })
                  }
                },
                {
                  label: 'label_delete', type: "confirm-button", url: '/ums-api/client/ThirdPartyAuthorizedClientRpc/remove.json', message: 'label_fms_bank_card_confirm_delete',
                  buttonClass: "button_text_danger", confirmButtonType: 'danger',
                  params: (row) => { return { "id": row["id"] } }, done: ['reload', 'tip']
                },

              ]
            },
          ],
        },
      },

      dialog: {
        customClass: 'dialog_small',
        submitUrl: '/ums-api/client/ThirdPartyAuthorizedClientRpc/saveUpdate.json',
        detailUrl: '/ums-api/client/ThirdPartyAuthorizedClientRpc/detail.json',
        submitDataHandle: (data) => {
          if (!data.id && data.platformCode != 'OZON') {
            delete data.businessType
          }
          return data
        },
        form: {
          itemClass: "", inputClass: "w_fill",
          // formClass: "el_form_row",
          model: [
            { header: "label_base_info", },

            {
              key: 'platformCode', label: 'label_platform_info',
              type: 'select', enum: 'ApiPlatformEnum', keyExtra: { _value: 'platformName' }
            },
            {
              key: 'businessType', label: 'label_business_type', if: (data) => data.platformCode == "OZON",
              type: 'select', enum: 'UmsThirdPartyAuthorizedTypeEnum',
            },

            {
              key: 'amazonRegionType',
              if: (data, item) => {
                const structure = this.apiStructure[data.platformCode] ? this.apiStructure[data.platformCode] : this.apiStructure.DEFAULT
                const key = item.key
                const build = structure[key]
                return !!build
              },
              label: '区域',
              type: 'select', enum: 'UmsAmazonRegionTypeEnum',
              rules: [{ required: true, message: vue.prototype.$tt('tip_can_no_empty'), trigger: 'change' }],
            },
            {
              key: 'sellerId', label: (data, item) => {
                const structure = this.apiStructure[data.platformCode] ? this.apiStructure[data.platformCode] : this.apiStructure.DEFAULT
                const key = item.key
                const build = structure[key]
                return build.i18n == false ? build.label : this.$tt(build.label)
              },
              rules: (data, item) => {
                const structure = this.apiStructure[data.platformCode] ? this.apiStructure[data.platformCode] : this.apiStructure.DEFAULT
                const key = item.key
                const build = structure[key]
                return build.rules
              },
            },
            {
              key: 'apiKeys', label: (data, item) => {
                const structure = this.apiStructure[data.platformCode] ? this.apiStructure[data.platformCode] : this.apiStructure.DEFAULT
                const key = item.key
                const build = structure[key]
                return build.i18n == false ? build.label : this.$tt(build.label)
              },
              rules: (data, item) => {
                const structure = this.apiStructure[data.platformCode] ? this.apiStructure[data.platformCode] : this.apiStructure.DEFAULT
                const key = item.key
                const build = structure[key]
                return build.rules
              },
            },
            {
              key: 'checkRule', if: (data, item) => {
                const structure = this.apiStructure[data.platformCode] ? this.apiStructure[data.platformCode] : this.apiStructure.DEFAULT
                const key = item.key
                const build = structure[key]
                return !!build
              },
              rules: (data, item) => {
                const structure = this.apiStructure[data.platformCode] ? this.apiStructure[data.platformCode] : this.apiStructure.DEFAULT
                const key = item.key
                const build = structure[key]
                return build.rules
              },
              render: (h, { data, item }) => {
                const structure = this.apiStructure[data.platformCode] ? this.apiStructure[data.platformCode] : this.apiStructure.DEFAULT
                const key = item.key
                const build = structure[key]
                return (
                  <div class="flex_row_center">
                    <el-checkbox value={data.checkRule} onInput={e => this.$set(data, 'checkRule', e)}>
                      {this.$tt('label_has_read_and_agree')}
                    </el-checkbox>
                    <el-link type="primary" onClick={build.click}>{this.$tt('title_head_ozon_return_good_agreement')}</el-link>
                  </div>)
              }
            },
          ],
          rules: {
            'platformCode': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],
            'businessType': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],

            // 'sellerId': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],
            // 'apiKeys': [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'change' }],
            // 'checkRule': [{
            //   required: true, type: 'boolean', trigger: 'change',
            //   validator: (r, v, cb) => {
            //     if (v != true) {
            //       cb(this.$tt('tip_please_read_agree_agreement'))
            //     } else {
            //       cb()
            //     }
            //   }
            // }],
          },
        }
      },
    };
  },

  methods: {
    clickOzonAgreement(e) {
      e.stopPropagation()
      this.$refs.ozon_agreement.show()
    },
    submitAfter() {
      this.reload()

    },
  }
};

</script>
<style></style>
